<div class="container">
    <!-- 提交以后显示 -->
    <div  [hidden]="submitted">
        <h1>Hero Form</h1>
        <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
            <!-- 名字 -->
            <div class="form-group">
                <label >Name</label>
                <input type="text" class="form-control" required title=""
                       [(ngModel)]="model.name"
                       name="name"  #name="ngModel" >
                <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
                    Name is required
                </div>
            </div>
            <!-- Alter Ego  -->
            <div class="form-group">
                <label >Alter Ego</label>
                <input type="text" class="form-control" title=""
                       [(ngModel)]="model.alterEgo"
                       name="alterEgo" >
            </div>
            <!-- 能力 -->
            <div class="form-group">
                <label >Hero Power</label>
                <select class="form-control" required
                        [(ngModel)]="model.power"
                        name="power" #power="ngModel"  title="">
                    <option *ngFor="let p of powers" [value]="p">{{p}}</option>
                </select>
                <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
                    Power is required
                </div>
            </div>
            <!-- 按钮 -->
            <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
            <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
        </form>
    </div>

    <!-- 未提交时显示 -->
    <div [hidden]="!submitted">
        <h2>You submitted the following:</h2>
        <div class="row">
            <div class="col-xs-3">Name</div>
            <div class="col-xs-9  pull-left">{{ model.name }}</div>
        </div>
        <div class="row">
            <div class="col-xs-3">Alter Ego</div>
            <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
        </div>
        <div class="row">
            <div class="col-xs-3">Power</div>
            <div class="col-xs-9 pull-left">{{ model.power }}</div>
        </div>
        <br>
        <button class="btn btn-default" (click)="submitted=false">Edit</button>
    </div>
</div>